<template>
  <div class="verify">
    <div class="title">为了您的账户安全，请先进行安全验证</div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="0px"
      status-icon
    >
      <el-form-item prop="newPwd">
        <el-input
          :prefix-icon="Lock"
          placeholder="密码由6-18位数字与字母、符号组成"
          size="large"
          type="password"
          show-password
          v-model="ruleForm.newPwd"
        />
      </el-form-item>
      <el-form-item prop="cPwd">
        <el-input
          :prefix-icon="Lock"
          placeholder="再次输入密码"
          size="large"
          type="password"
          show-password
          v-model="ruleForm.cPwd"
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleNext" size="large" class="wh" type="primary"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { Lock } from "@element-plus/icons-vue";
import { deepClone } from "@/utils/index";
const ruleForm = ref({});
const ruleFormRef = ref();
const loading = ref(false);
const { proxy } = getCurrentInstance();
const emit = defineEmits(["change"]);
onMounted(() => {
  proxy.$mitt.on("formEvent", (res) => {
    ruleForm.value = res;
  });
});
const handleNext = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        url: "/buyer/pwd/reset",
        params: deepClone(ruleForm.value),
      };
      loading.value = true;
      proxy.$get(params).then(
        (res) => {
          loading.value = false;
          emit("change");
        },
        () => {
          loading.value = false;
        }
      );
    }
  });
};
const rules = ref({
  newPwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  cPwd: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请再次确认密码"));
        } else if (ruleForm.value.newPwd !== value) {
          callback(new Error("两次密码输入不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
</script>
<style lang="less" scoped>
.verify {
  margin-top: 70px;
  .title {
    font-size: 14px;
    color: #575757;
    margin-bottom: 50px;
  }
}
</style>